import React from 'react';
import {Button, Icon, Tree, Spin, message} from 'antd';
import {WeaTools, WeaDialog, WeaInputNumber, WeaMoreButton, WeaFormItem, WeaInput,WeaSwitch, WeaSelect,WeaSearchGroup, WeaHelpfulTip,WeaLocaleProvider, WeaCheckbox, WeaBrowser} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import * as lodash from 'lodash';
import { toJS } from 'mobx';
import EOrderCol from './base/EOderCol';
import EField_New from './base/EField_New';
const TreeNode = Tree.TreeNode;
const getKey = WeaTools.getKey;
import { InputNumber } from 'antd';
import { observer, inject } from 'mobx-react';
import {Condition} from './Condition';
@inject('wfCenterStore')
@observer
class Main extends React.Component {
    constructor(props) {
      super(props);
   

      const {settingData = {}} = props;
      this.state = {
          visible: true,
          id: settingData.id,
          ...this.getStateVaule(settingData)
      };
    }
    getStateVaule = (data) => {
      return {
        orderColDataSource: data.condition && data.condition.orderColDatas || [], //排序字段
        orderColUsedKeys: data.condition && data.condition.orderColSelects && data.condition.orderColSelects.split(',') || [],
        eFieldNewDataSource: data.condition && data.condition.showColDatas || [], //显示字段
        eFieldNewUsedKeys:  data.condition && data.condition.showColSelects && data.condition.showColSelects.split(',') || [],
        dimensionalityDataSouce: data.condition && data.condition.showtypeidDatas || [], //显示维度
        dimensionalityUsedKeys : data.condition &&  data.condition.showtypeidSelects && data.condition.showtypeidSelects.split(',') || [],
        wfCount: data.wfCount || 10,
      }
    }
  
  
    componentWillReceiveProps(nextPorps) {
      const {settingData = {}} = nextPorps;
      this.setState(this.getStateVaule(settingData));
    }
    onCancel = () => {
      this.props.onCancel();
    }
    onOk = () => {
      const { settingForm } = this.props.wfCenterStore;
      let passParams = {
        showcol: this.state.eFieldNewUsedKeys.join(','),
        ordercol: '',
        showtypeids: this.state.dimensionalityUsedKeys.join(','),
      }
      let arr = [];
      this.state.orderColDataSource.map ( i => {
        this.state.orderColUsedKeys.map( (j,index) => {
          if(i.id == j) {
            arr.push( i.id + '|' + i.ordertype);
          } 
        })
      })
      passParams.ordercol = arr.join(',');
      let formParams = settingForm.getFormParams();
      settingForm.validateForm().then( f => {
        if(f.isValid || this.validate(formParams)) {
          this.props.onOk({...formParams, ...passParams});
        } else {
            message.warning(getLabel(15859, '必要信息不完整！'));
        }
      }) 
      
    }
    validate(params){
      const {fromType = '',workflowids = '',workflowtypes = ''} = params;
      if((fromType == '1' || fromType == '2') && workflowids == '' ) {
        return false; 
      } else if((fromType == '3' || fromType == '4') && workflowtypes == '') {
          return false;
      } else {
          return true;
      }
  }
    getEFieldNew =() =>{
      const {
          eFieldNewDataSource, eFieldNewUsedKeys, 
        } = this.state;
      const { eFieldNewVisible } = this.props.wfCenterStore;

        //显示字段设置
      let EFieldNew = <div></div>;
      if (eFieldNewVisible) {
        let dataSource = _.cloneDeep(toJS(eFieldNewDataSource));
        dataSource.map( v => {
            if(!v.name || !v.id || !v.key) {
              v.name = v.fieldshowname;
              v.id = v.id;
              v.key = v.id;
            } 
        })
        const eFieldNewProps = {
            title: getLabel(517604, '显示字段设置'),
            eFieldNewDataSource: dataSource,
            eFieldNewUsedKeys: _.cloneDeep(eFieldNewUsedKeys),
            onOk: (data) => {
                  this.setState({
                      eFieldNewDataSource: _.cloneDeep(data.eFieldNewDataSource),
                      eFieldNewUsedKeys: _.cloneDeep(data.eFieldNewUsedKeys),
                  });
                this.props.wfCenterStore.centerSetState({eFieldNewVisible:false});
              },
              onCancel: () => {
                this.props.wfCenterStore.centerSetState({eFieldNewVisible:false});
            }
        };
        EFieldNew = <div className='transfer-wrap'><EField_New ecId={`${this && this.props && this.props.ecId || ''}_EField_New@jhmnfo`} {...eFieldNewProps}/></div>
      }
      return EFieldNew;
    }
    getEorderCol  = () => {
      const {
           orderColDataSource, orderColUsedKeys,
        } = this.state;
        const { orderColVisible } = this.props.wfCenterStore;

         //排序字段设置
         let orderColComp = <div></div>;
         if (orderColVisible) {
           let orderSource = [];
             _.cloneDeep(toJS(orderColDataSource)).map( v => {
               if(!v.key) {
                 orderSource.push({...v,key: v.id})
               } else {
                 orderSource.push(v);
               }
           })
             const orderColProps = {
                 orderColDataSource: orderSource,
                 orderColUsedKeys: _.cloneDeep(orderColUsedKeys),
                 onOk: (data) => {
                     this.setState({
                         orderColDataSource: data.orderColDataSource,
                         orderColUsedKeys: data.orderColUsedKeys,
                     });
                     this.props.wfCenterStore.centerSetState({orderColVisible:false});
                    },
                 onCancel: () => {
                     this.props.wfCenterStore.centerSetState({orderColVisible:false});
                 }
             };
             orderColComp = <EOrderCol ecId={`${this && this.props && this.props.ecId || ''}_EOrderCol@36olax`} {...orderColProps}/>
         }
      return orderColComp;
    }
    getshowTypeNew = () => {
      const {
          dimensionalityDataSouce,
          dimensionalityUsedKeys
        } = this.state;
        const { showTypeNewVisible } = this.props.wfCenterStore;
        //显示维度设置
      let showTypeNew = <div></div>
      if (showTypeNewVisible) {
        let showTypeNewDataSource = _.cloneDeep(toJS(dimensionalityDataSouce));
        showTypeNewDataSource.map( v => {
            if(!v.name || !v.id || !v.key) {
              v.name = v.showname;
              v.key = v.typeid;
              v.id = v.typeid;
            } 
        })
        const showTypeNewProps = {
            title: getLabel(517053, '显示维度设置'),
            eFieldNewDataSource: showTypeNewDataSource,
            eFieldNewUsedKeys: _.cloneDeep(dimensionalityUsedKeys),
            onOk: (data) => {
                  this.setState({
                      dimensionalityDataSouce: _.cloneDeep(data.eFieldNewDataSource),
                      dimensionalityUsedKeys: _.cloneDeep(data.eFieldNewUsedKeys),
                  });
                this.props.wfCenterStore.centerSetState({showTypeNewVisible: false});
            },
            onCancel: () => {
              this.props.wfCenterStore.centerSetState({showTypeNewVisible: false});
            }
        };
        showTypeNew = <EField_New ecId={`${this && this.props && this.props.ecId || ''}_EField_New@y4e31n`} {...showTypeNewProps}/>
      }
      return showTypeNew;
    }
    

    getTitle() {
      const {
          orderColDataSource, orderColUsedKeys,
          eFieldNewDataSource, eFieldNewUsedKeys, dimensionalityDataSouce,
          dimensionalityUsedKeys
        } = this.state;
        const orderColUsedNames = [];
        for (let i = 0, len = orderColUsedKeys.length; i < len; i++) {
            for (let j = 0, len2 = orderColDataSource.length; j < len2; j++) {
                if (orderColUsedKeys[i] == orderColDataSource[j].id) {
                    orderColUsedNames.push(orderColDataSource[j].fieldshowname + '-' + (orderColDataSource[j].ordertype == '0' ? getLabel(340,"降序") : getLabel(339,"升序")));
                }
            }
        }
  
        const eFieldNewUsedNames = [];
        for (let i = 0; i < eFieldNewUsedKeys.length; i++) {
            for (let j = 0 ; j < eFieldNewDataSource.length; j++) {
                if (eFieldNewUsedKeys[i] == eFieldNewDataSource[j].id) {
                    eFieldNewUsedNames.push(eFieldNewDataSource[j].fieldshowname);
                }
            }
        }
  
        const  showTypeNewNames = [];
        for( let i = 0; i < dimensionalityUsedKeys.length; i++) {
          for( let j = 0; j < dimensionalityDataSouce.length; j++) {
            if(dimensionalityUsedKeys[i] == dimensionalityDataSouce[j].typeid) {
              showTypeNewNames.push(dimensionalityDataSouce[j].showname);
            }
          }
        }
      
        let orderTitles ="";
        for(let i = 0;i < orderColUsedNames.length; i++){
          if(i !== orderColUsedNames.length -1 ){
            orderTitles = orderTitles + orderColUsedNames[i] + '， ';
          } else {
            orderTitles = orderTitles + orderColUsedNames[i];
          }
        }
  
        let eFieldTitles ="";
        for(let i = 0;i < eFieldNewUsedNames.length; i++){
            if(i !== eFieldNewUsedNames.length - 1) {
              eFieldTitles = eFieldTitles + eFieldNewUsedNames[i] + '， ';
            } else {
              eFieldTitles = eFieldTitles + eFieldNewUsedNames[i];
            }
        }
        let showTypeTitles ="";
        for(let i = 0;i < showTypeNewNames.length; i++){
          if(i !== showTypeNewNames.length -1) {
            showTypeTitles = showTypeTitles + showTypeNewNames[i] + '， ';
          } else {
            showTypeTitles = showTypeTitles + showTypeNewNames[i];
          }
        }
        return { orderTitles,eFieldTitles, showTypeTitles }
    }
    render() {
      const {  title, dialogHeight} = this.props;
      const { visible} = this.state;
      const {  eFieldNewVisible, showTypeNewVisible,orderColVisible} = this.props.wfCenterStore;
      let titleObj = this.getTitle();
      return (
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@qv1fkn`}
          className="wf-center-esetting-dialog"
          visible={visible}
          title={`${getLabel(506919, '内容设置')}: ${title}`}
          icon={'icon-coms-workflow'}
          iconBgcolor={'rgb(0, 121, 222)'}
          style={{width: 750, height: dialogHeight}}
          resize={true}
          draggable={true}
          buttons={this.getButtons()}
          onCancel={this.onCancel}
        >
            <Condition 
              ecId={`${this && this.props && this.props.ecId || ''}_Condition@brtuzd`} 
              titleObj={titleObj}
            />
            {eFieldNewVisible && this.getEFieldNew()}
            {showTypeNewVisible && this.getshowTypeNew()}
            {orderColVisible && this.getEorderCol()}
        </WeaDialog>
      );
    }
    getButtons() {
      let buttons = [];
      buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yom1er@save`} type="primary" onClick={this.onOk}>{getLabel(86,"保存")}</Button> );
      buttons.push(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@g95nks@$more`}
        datas={[
          {
            key: "save",
            icon: <i className='icon-coms-Preservation'/>,
            content:getLabel(86,"保存"),
            onClick: () => {this.onOk()}
          }
        ]}
        collectParams={status.collectParams}>{getLabel(17499,'更多')}</WeaMoreButton> );
      return buttons;
  }
}

export default Main;
